<template>
  <div class="">
    <el-descriptions class="margin-top" title="" :column="4" size="mini" border style="margin-bottom: 15px;">
      <!-- 房产信息 -->
      <el-descriptions-item>
        <template slot="label">房产</template>
        <span v-text="houseinfo.hoursename"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">户型</template>
        <span v-text="houseinfo.modelname"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">业态类型</template>
        <span v-text="houseinfo.termtype"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">销售面积</template>
        <span v-text="houseinfo.salearea"></span>
      </el-descriptions-item>
      <!-- 客户信息 -->
      <el-descriptions-item>
        <template slot="label">客户姓名</template>
        <span v-text="customer.custname"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">国籍</template>
        <span v-text="customer.country"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">户籍</template>
        <span v-text="customer.nation"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">籍贯</template>
        <span v-text="customer.babyaddr"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">性别</template>
        <span v-text="customer.sex"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">主管业务员</template>
        <span v-text="customer.chargeperson"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">证件名称</template>
        <span v-text="customer.cardname"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">证件号码</template>
        <span v-text="customer.cardno"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">客户性质</template>
        <span v-text="customer.custtype"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">客户类型</template>
        <span v-text="customer.custstateid"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">首选联系电话</template>
        <span v-text="customer.primaryTel"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">手机号码</template>
        <span v-text="customer.mobile"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">邮政编码</template>
        <span v-text="customer.postcode"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">登记时间</template>
        <span v-text="parseTime(customer.signdate, '{y}-{m}-{d}')"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">登记地点</template>
        <span v-text="customer.signaddr"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">联系地址</template>
        <span v-text="customer.addr"></span>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 新增买房信息 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="92px" :inline="true" size="mini" >
      <el-row>
        <el-form-item label="优惠方案" prop="discountid">
          <el-select
            v-model="form.dicountid"
            style="width: 178px"
            @change="changeDiscount"
          >
            <el-option
              v-for="(d, index) in discountList"
              :key="index"
              :label="d.discountname"
              :value="d.discountid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单价优惠" prop="dicountid">
          <el-input v-model="discount.unitprice" readonly />
        </el-form-item>
        <el-form-item label="总价优惠" prop="dicountid">
          <el-input v-model="discount.totalprice" readonly />
        </el-form-item>
        <el-form-item label="折扣优惠" prop="dicountid">
          <el-input v-model="discount.discountpercent" readonly />
        </el-form-item>
        <el-form-item label="付款方案" prop="psid">
          <el-select
            v-model="form.psid"
            placeholder="请选择付款方案"
            style="width: 178px"
          >
            <el-option
              v-for="(ps, index) in PaidSchemeList"
              :key="index"
              :label="ps.psname"
              :value="ps.psid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成交单价" prop="unitprice">
          <el-input v-model="form.unitprice" readonly />
        </el-form-item>
        <el-form-item label="购房总款" prop="totalmoney">
          <el-input v-model="form.totalmoney" readonly />
        </el-form-item>
        <el-form-item label="购买时间" prop="buytime">
          <el-date-picker
            v-model="form.buytime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择购买时间"
            style="width: 178px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="装修单价" prop="fitmentunitprice">
          <el-input type="number" v-model="form.fitmentunitprice" @input="changeFitmentPrice" placeholder="请输入装修单价"/>
        </el-form-item>
        <el-form-item label="装修总金额" prop="fitmenttotalprice">
          <el-input v-model="form.fitmenttotalprice" readonly/>
        </el-form-item>
        <el-form-item label="装修首付款" prop="fitmentfirstprice">
          <el-input v-model="form.fitmentfirstprice" readonly/>
        </el-form-item>
        <el-form-item label="装修尾款" prop="fitmentlastprice">
          <el-input v-model="form.fitmentlastprice" readonly/>
        </el-form-item>
        <el-form-item label="签约单价" prop="signunitprice">
          <el-input v-model="form.signunitprice" readonly />
        </el-form-item>
        <el-form-item label="签约总金额" prop="signtotalprice">
          <el-input v-model="form.signtotalprice" readonly />
        </el-form-item>
        <el-form-item label="首期款" prop="firstmoney">
          <el-input v-model="form.firstmoney" readonly />
        </el-form-item>
        <el-form-item label="业务员" prop="saleperson">
          <el-input v-model="form.saleperson" placeholder="请输入业务员" @focus="openDialog"/>
        </el-form-item>
      </el-row>

      <el-row v-show="form.psid != 1">
        <el-form-item label="按揭银行" prop="bankid">
          <!-- <el-input v-model="form.bankid" placeholder="请输入按揭银行" /> -->
          <el-select
            v-model="form.bankid"
            placeholder="请选择按揭银行"
            style="width: 178px"
          >
            <el-option
              v-for="(bank, index) in BankList"
              :key="index"
              :label="bank.bankname"
              :value="bank.bankname"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="按揭成数" prop="bankpercent">
          <el-input v-model="form.bankpercent" placeholder="请输入按揭成数%" type="number" @input="changeBankPercent"/>
        </el-form-item>
        <el-form-item label="按揭金额" prop="bankmoney">
          <el-input v-model="form.bankmoney" readonly/>
        </el-form-item>
        <el-form-item label="按揭利息" prop="bankaccrual">
          <el-input v-model="form.bankaccrual" placeholder="请输入按揭利息" />
        </el-form-item>
        <el-form-item label="按揭年数" prop="bankyear">
          <el-input v-model="form.bankyear" placeholder="请输入按揭年数" />
        </el-form-item>
        <el-form-item label="按揭律师" prop="lawyer">
          <el-input v-model="form.lawyer" placeholder="请输入按揭律师" />
        </el-form-item>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="2" :offset="20">
        <el-button
          type="primary"
          @click="goback"
          size="mini"
        >返 回</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="submitForm"
          size="mini"
          v-if="mode == 'buy'"
        >购 买</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          size="mini"
          v-if="mode == 'change'"
        >更 换</el-button>
      </el-col>
    </el-row>
    <!-- 选择业务员对话框 -->
    <el-dialog title="选择业务员" :visible.sync="userOpen" width="89%" append-to-body>
      <ChooseUser @sysuser="setSaleperson"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChooseUser from '@/views/system/user/index';
import { addBuyHouse, paidschemelist, change } from "@/api/house_sale/BuyHouse";
import { listDiscount, getDiscount } from "@/api/house_sale/discount";
import { getCustomer } from "@/api/house_sale/customer";
import { listBank } from "@/api/house_sale/Bank";

export default {
  name: "BuyHouse",
  components: { ChooseUser },
  props: ["houseinfo", "custid", "mode", "buyid"],
  data() {
    return {
      // 选择业务员对话框
      userOpen: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 付款方式列表
      PaidSchemeList: [],
      // 优惠方案列表
      discountList: [],
      // 银行列表
      BankList: [],
      // 优惠方案
      discount: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        invalid: '有效'
      },
      // 客户信息
      customer: {},
      // 表单参数
      form: {
        buyid: null,
        custid: null,
        custname: null,
        hourseid: null,
        psid: null,
        dicountid: null,
        unitprice: null,
        totalmoney: null,
        bankid: null,
        firstmoney: null,
        bankmoney: null,
        bankaccrual: null,
        bankyear: null,
        bankpercent: null,
        lawyer: null,
        buytime: null,
        saleperson: null,
        userid: null,
        oprtime: null,
        invalid: '有效',
        oprtype: null,
        hourseid2: null,
        signtime: null,
        banktime: null,
        cashmoney: 0,
        signunitprice: null,
        signtotalprice: null,
        fitmentunitprice: 0,
        fitmenttotalprice: 0,
        fitmentfirstprice: 0,
        fitmentlastprice: 0
      },
      // 表单校验
      rules: {
        buytime: [
          { required: true, message: "购买时间不能为空", trigger: "blur" },
        ],
        saleperson: [
          { required: true, message: "业务员不能为空" },
        ],
        fitmentunitprice: [
          { required: true, message: "装修单价不能为空", trigger: "blur" },
        ]
      },
    };
  },
  created() {
    this.form.buyid = this.buyid;
    this.form.custid = this.custid;
    this.form.hourseid = this.houseinfo.hourseid;
    this.form.unitprice = this.houseinfo.unitprice;
    this.form.totalmoney = this.houseinfo.totalprice;
    this.getCustomerInfo();
    this.getPaidSchemeList();
    this.getDiscountList();
    this.getBankList();
  },
  watch: {
    houseinfo() {
      this.form.hourseid = this.houseinfo.hourseid;
    },
    custid() {
      this.form.custid = this.custid;
      this.getCustomerInfo();
    },
    buyid() {
      this.form.buyid = this.buyid;
    }
  },
  methods: {
    // 隐藏选择业务员对话框
    close() {
      this.userOpen = false;
    },
    // 打开选择业务员对话框
    openDialog() {
      this.userOpen = true;
    },
    // 设置业务员
    setSaleperson(sysuser) {
      this.form.saleperson = sysuser.nickName;
    },
    /** 设置签约价格 */
    setSignPrice() {
      this.form.signunitprice = this.form.unitprice-this.form.fitmentunitprice;
      this.form.signtotalprice = this.form.totalmoney-this.form.fitmenttotalprice;
      this.changeBankPercent();
    },
    /** 改变按揭成数 */
    changeBankPercent() {
      this.form.bankmoney = this.form.signtotalprice * this.form.bankpercent;
      this.form.firstmoney = this.form.signtotalprice - this.form.bankmoney;
      // 计算装修首款与尾款
      this.form.fitmentlastprice = this.form.fitmenttotalprice * this.form.bankpercent;
      this.form.fitmentfirstprice = this.form.fitmenttotalprice - this.form.fitmentlastprice;
    },
    /** 改变装修价格 */
    changeFitmentPrice() {
      if(this.form.fitmentunitprice >= 0) {
        this.form.fitmenttotalprice = this.form.fitmentunitprice * this.houseinfo.salearea;
        this.form.fitmentfirstprice = this.form.fitmenttotalprice;

        this.setSignPrice();
      }
    },
    /** 改变优惠方案 */
    changeDiscount() {
      getDiscount(this.form.dicountid).then(response => {
        this.discount = response.data;
        // 初始化价格
        this.form.unitprice = this.houseinfo.unitprice;
        this.form.totalmoney = this.houseinfo.totalprice;
        // 计算 成交单价 与 购房总款
        if(this.discount.discountpercent != 0 && this.discount.discountpercent != 1) {
          this.form.totalmoney = this.form.totalmoney*this.discount.discountpercent;
          this.form.unitprice = this.form.totalmoney/this.houseinfo.salearea;
        } else if(this.discount.totalprice != 0) {
          this.form.totalmoney = this.form.totalmoney-this.discount.totalprice;
          this.form.unitprice = this.form.totalmoney/this.houseinfo.salearea;
        } else if(this.discount.unitprice != 0) {
          this.form.unitprice = this.form.unitprice-this.discount.unitprice;
          this.form.totalmoney = this.form.unitprice*this.houseinfo.salearea;
        }
        this.setSignPrice();
      });
    },
    /** 查询优惠方案列表 */
    getDiscountList() {
      listDiscount(this.queryParams).then(response => {
        this.discountList = response.rows;
        this.form.dicountid = this.discountList[0].discountid;
        this.discount = this.discountList[0];

        this.setSignPrice();
      });
    },
    /** 查询付款方案列表 */
    getPaidSchemeList() {
      paidschemelist(this.queryParams).then(response => {
        this.PaidSchemeList = response.rows;
        this.form.psid = this.PaidSchemeList[0].psid
      });
    },
    /** 查询银行名称列表 */
    getBankList() {
      listBank(this.queryParams).then(response => {
        this.BankList = response.rows;
      });
    },
    /** 提交按钮 保存进入下一步 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(this.mode == 'buy') {
            this.form.oprtype = '买房';
            this.form.custname = this.customer.custname;
            addBuyHouse(this.form).then((response) => {
              this.$emit("next", response.data);
            });
          } else if (this.mode == 'change') {
            this.form.oprtype = '换房';
            this.form.userid = this.$store.state.user.name;
            change(this.form).then(response => {
              if(response.data > 0) {
                this.$modal.msgSuccess("换房成功");
                this.$emit("next");
              } else {
                this.$modal.msgError("发生错误");
                this.$emit("next");
              }
            });
          }
        }
      });
    },
    /** 返回上一步 */
    goback() {
      this.$emit("goback");
    },
    // 获取客户信息
    getCustomerInfo() {
      getCustomer(this.custid).then(response => {
        this.customer = response.data;
      });
    }
  }
};
</script>
